<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<html>
<body>
<script type="text/javascript" src="/admin/js/jscharts.js" charset="UTF-8"></script>
<script language="javascript" type="text/javascript">
function showChart(){
	var myChart = new JSChart('graph', 'line');
	myChart.setDataArray([
							<c:forEach var="c1" items="${onlineCount.chartList}" varStatus="vs">
								[${c1.hour},${c1.onlineMax}]
								<c:if test="${vs.count != 24}">
									,
								</c:if>
							</c:forEach>
	                      ], 'red');
	myChart.setDataArray([
							<c:forEach var="c1" items="${onlineCount.chartList}" varStatus="vs">
								[${c1.hour},${c1.registerMax}]
								<c:if test="${vs.count != 24}">
									,
								</c:if>
							</c:forEach>
	                      ], 'green');
	                      
     myChart.setDataArray([
			<c:forEach var="c1" items="${yesOnline.chartList}" varStatus="vs">
				[${c1.hour},${c1.onlineMax}]
				<c:if test="${vs.count != 24}">
					,
				</c:if>
			</c:forEach>
          ], 'blue');
          
    myChart.setDataArray([
		<c:forEach var="c1" items="${yesOnline.chartList}" varStatus="vs">
			[${c1.hour},${c1.registerMax}]
			<c:if test="${vs.count != 24}">
				,
			</c:if>
		</c:forEach>
      ], 'yellow');
    
    
    myChart.setDataArray([
 			<c:forEach var="c1" items="${weekbeforeDate.chartList}" varStatus="vs">
 				[${c1.hour},${c1.onlineMax}]
 				<c:if test="${vs.count != 24}">
 					,
 				</c:if>
 			</c:forEach>
           ], 'violet');
           
     myChart.setDataArray([
 		<c:forEach var="c1" items="${weekbeforeDate.chartList}" varStatus="vs">
 			[${c1.hour},${c1.registerMax}]
 			<c:if test="${vs.count != 24}">
 				,
 			</c:if>
 		</c:forEach>
       ], 'black');
	                      
	                      
	myChart.setAxisPaddingBottom(40);
	myChart.setTextPaddingBottom(10);
	//myChart.setAxisValuesNumberY(5);
	myChart.setTitle('红色:当前日期在线最大人数, 绿色:当前日期注册最大人数 , 蓝色:昨天在线, 黄色:昨天注册, 紫色:7天前在线 , 黑色:7天前注册');
	myChart.setIntervalStartY(0);
	//myChart.setIntervalEndY(2000);
	<c:forEach var="c1" items="${onlineCount.chartList}" varStatus="vs">
		myChart.setLabelX([${vs.count - 1},'${c1.hour}点']);
	</c:forEach>
	myChart.setAxisValuesNumberX(24);//设置x轴坐标有几个点
	myChart.setShowXValues(false);
	myChart.setTitleColor('#454545');
	myChart.setAxisValuesColor('#454545');
	myChart.setLineColor('#AB0707', 'red');
	myChart.setLineColor('#37AA03', 'green');
	myChart.setLineColor('#0033CC', 'blue');
	myChart.setLineColor('#FF9900', 'yellow');
	myChart.setLineColor('#EE00EE', 'violet');
	myChart.setLineColor('#000000', 'black');
	
	<c:forEach var="c1" items="${onlineCount.chartList}" varStatus="vs">
		myChart.setTooltip([${vs.count - 1}]);
	</c:forEach>
	myChart.setFlagColor('#9D16FC');
	myChart.setFlagRadius(3);
	myChart.setBackgroundImage('');
	myChart.setSize(900, 400);
	myChart.draw();
}

var clickTimes = 0;
function seePic(){
	clickTimes++;
	if(clickTimes == 1){
		showChart();
	}
	if(clickTimes % 2 == 0){
		$("#container").hide();
		$("#lookChart").html("查看图表");
	}else{
		$("#container").show();
		$("#lookChart").html("收起图表");
	}
}
</script>
<form class="form-inline" action="" method="get">
  <div class="datepicker input-append">
    <input data-format="yyyy-MM-dd" type="text" value="${selectDate}" name="selectDate"></input>
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>
  </div>
  <button type="submit" class="btn">查询</button>&nbsp;
  <button type="button" class="btn" id="lookChart" onclick="seePic();">查看图表</button>
  &nbsp;<span>总记录数：${onlineCount.allCount}</span>
</form>
<div id="container">
	<div id="graph"></div>
</div>
<table class="table table-bordered">
  <thead>
    <tr>	 	 	 	 	 	 	 							 	
      <th>日期</th>
      <th>总在线人数 </th>
      <th>新注册人数</th>
      <th>新建角色人数</th>
      <th>麦序平均长度</th>
      <th>独立IP数 </th>
    </tr>
  </thead>
  <tbody>
  <c:forEach var="m" items="${onlineCount.detailList}">
    <tr>
      <td>${m.atTime}</td>
      <td>${m.players}</td>
      <td>${m.newRegister}</td>
      <td>${m.newRoles}</td>
      <td>${m.avgMikeSize}</td>
      <td>${m.ipCount}</td>
    </tr>
  </c:forEach>
  </tbody>
</table>
<tags:page1 page="${page}" pageSize="${pageSize }" total="${onlineCount.allCount}" url="?selectDate=${selectDate}&page="/>
在线人数：当前所有在线用户总和，不计游客<br/>
总人数：当前在线用户+游客的总和<br/>
注册人数：成功注册账号<br/>
创角色数：已注册，且成功创建角色数量, 使用已有KUGOU账号登录，首次创建角色.<br/>
</body>
</html>